<style lang="less">
  @greenStyle:#63c5ce;  
    #menu{
        .is-opened{
          .el-submenu__title{
            background: @greenStyle;
            color:#fff;
          }
        }
        .firstLevelTitle {                                  //菜单栏
          background: #fff;
          text-align: left;

          .el-submenu__title {                              //一级标题
              border-bottom:0.5px solid #e0e0e0;
              height:3.125rem;
              line-height:3.125rem;
              font-size:1rem;
              &:hover{
                background: @greenStyle;
                color:#fff;
                .big{                                     //图标hover
                  background: #fff;
                }
                .small{                                   //图标hover
                  background: @greenStyle;
                }
              }
              .big {                                      //图标
                display: inline-block;
                width: 1.25rem;
                height: 1.25rem;
                border-radius: 0.625rem;
                background: #cccccc;
                vertical-align: middle;
                margin-right: 0.625rem;
              }
              .small {                                   //图标
                display: block;
                width: 1.09rem;
                height: 1.09rem;
                border-radius: 0.531rem;
                background: #fff;
                margin-left: 0.078rem;
                margin-top: 0.078rem;
              }
          }
          .el-menu{                                         //一级菜单展开
            .el-menu-item-group__title{
              display: none;
            }
            .el-menu-item{                                  //二级菜单
              height:2.5rem;
              line-height:2.5rem;
              padding:0;
              padding-left:0 !important;
              font-size:0.9rem;
              // background: #f9f9f9;
              a{
                color:#48576a;
              }
            }
            .is-active{ //选中状态
              a{
                color:@greenStyle;
              }
            }
          }
        }
        /*一级菜单*/
        .el-menu{
          position: relative;
          height: 100%;
          background-color: #fff;
          min-width:200px;
          .el-menu-item-group__title{
            padding-top: 0;
          }
          .menuLeve2{
            width:100%;
            height: 100%;
            text-align: left;
            text-indent: 3.125rem;
            background-color: #f0f0f0;
          }
          .el-menu-item{
            border-bottom: 1px dashed #ffffff;
            &:last-child{
              // border-bottom: none;
            }
          }
        }
    }
</style>

<template>
  <div id="menu">
  <el-col :span="24">
    <el-menu 
    v-if='showMenu'
    :default-active="this.$route.path" 
    class="el-menu-vertical-demo" 
    v-loading='loadingMenu'
    element-loading-text="请求中"
    unique-opened>
      <el-submenu v-for="(item,index) in menuList" :index="index+''" :key='item.router'  class="firstLevelTitle">
          <template slot="title" >
            <i class="iconfont" v-html='item.icon'></i> {{item.label}}
          </template>
            <el-menu-item  v-for='child in item.children' @click='changeRouter(child.router)' class="menuLeve2" :index="'/'+child.router" :key="child.id">
              {{child.label}} 
            </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-col>
  </div>
</template>

<script>
  import {getMenuList} from '../../api/common/index.js'
  export default {
    props: {
      roleId: {
        type: [String, Number],
        required: true
      }
    },
    data () {
      return {
        showMenu: false, //menuList有数据以后在渲染menu才能展开默认选中项！！！
        menuList: [], //
        loadingMenu: false
      }
    },
    watch: {
      roleId (val, oldVal) {
        if (val) {
            // console.warn(`AuthMenu watch roleId: val:${val} , oldVal:${oldVal}, sessionStorage:${sessionStorage.getItem('roleId')}`)
          let _oldVal = oldVal || sessionStorage.getItem('roleId')
          let isSame = String(val) === _oldVal;
          if (!isSame) {
            // console.log('移除原来的路由页面', sessionStorage.getItem('router_page'))
            sessionStorage.removeItem('router_page');
          }
          this.getMenu(val);
        }
      }
    },
    methods: {
      async getMenu (roleId) { //      获取菜单
        try {
          if (!roleId) return
          this.showMenu = false;//切换角色后重新渲染！
          this.loadingMenu = true;
          let back = await getMenuList(roleId)
          back = back.data;
          this.loadingMenu = false;
          console.log('获取菜单！roleId =>', roleId, back)
          if (back.resultCode === '200') {
            this.menuList = back.result;
            this.showMenu = true; //menuList 有数据以后在渲染menu才能展开默认选中项！！！

            this.$store.dispatch('dispatchMenu', back.result);// 设置 按钮的操作 权限
            // this.$store.dispatch('setMenuList', back.result);// 设置菜单
            /*
            * 设置当前路由，
            * 刷新路由不变(从sessionStorage 取值)，
            * 重新登陆或切换用户取菜单第一个路由
            * ** hello 为登陆后默认跳转的
            */
            if (sessionStorage.getItem('router_page') && sessionStorage.getItem('router_page') !== 'hello') {
              this.changeRouter(sessionStorage.getItem('router_page'))
            } else {
              let routerPath = back.result[0] && back.result[0].children[0] && back.result[0].children[0].router
              ? back.result[0].children[0].router : 'hello';
              this.$router.push({path: '/' + routerPath});
            }
          } else {
            this.$alert(back.msg)
          }
        } catch (e) {
          this.loadingMenu = false;
          this.$alert('请求错误！')
          console.error(e)
        }
      },
      changeRouter (name, query = {}, params = {}) {
        console.log(`改变菜单！ => ${name}`)
        this.$router.push({
          name: name,
          query: query,
          params: params
        })
      }
    }
  }
</script>

